<script setup>
import { ref } from 'vue'

const todos = ref([
  { id: 1, title: "今天睡觉到11点", completed: false },
  { id: 2, title: "今晚打老虎", completed: false },
  { id: 3, title: "今天吃什么", completed: false }
])

const newTodoText = ref("")

const addTodo = () => {
  if (!newTodoText.value.trim()) return
  
  const newTodo = {
    id: Math.max(...todos.value.map(t => t.id)) + 1,
    title: newTodoText.value.trim(),
    completed: false
  }
  
  todos.value.push(newTodo)
  newTodoText.value = ""
}

const deleteTodo = (id) => {
  const index = todos.value.findIndex(todo => todo.id === id)
  if (index !== -1) {
    todos.value.splice(index, 1)
  }
}
</script>

<template>
  <div class="container">
    <div class="header">
      <h3>备忘录</h3>
      <input 
        type="text" 
        v-model="newTodoText"
        placeholder="输入待办事项..."
        @keyup.enter="addTodo"
        class="todo-input"
      >
    </div>

    <div class="main">
      <ul class="todo-list">
        <li 
          v-for="todo in todos" 
          :key="todo.id"
          class="todo-item"
        >
          <input 
            type="checkbox" 
            v-model="todo.completed"
            class="todo-checkbox"
          >
          <span :class="{ 'completed': todo.completed }">
            {{ todo.title }}
          </span>
          <button 
            @click="deleteTodo(todo.id)"
            class="delete-btn"
          >
            删除
          </button>
        </li>
      </ul>
    </div>

    <div class="footer">
      <div class="counter">
        共计：{{ todos.length }} 项
      </div>
      <div class="filters">
        <button class="filter-btn">全部</button>
        <button class="filter-btn">未完成</button>
        <button class="filter-btn">已完成</button>
      </div>
    </div>
  </div>
</template>

<style>
body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f0f0f0;
}

.container {
  width: 500px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  overflow: hidden;
}

.header {
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.todo-input {
  width: 100%;
  padding: 8px;
  margin-top: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.main {
  height: 400px;
  overflow-y: auto;
  padding: 20px;
}

.todo-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.todo-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.todo-checkbox {
  margin-right: 10px;
}

.completed {
  color: #888;
  text-decoration: line-through;
}

.delete-btn {
  margin-left: auto;
  background-color: #ff4444;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-top: 1px solid #eee;
}

.filters {
  display: flex;
  gap: 10px;
}

.filter-btn {
  padding: 5px 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: white;
  cursor: pointer;
}
</style>